import QtQuick 1.0

Rectangle {
    id: popup
    width: parent.width
    height: parent.height
    color: "black"
    opacity: 0
    property bool show: false
    property alias text: popupText.text

    Rectangle {
        Text {
            font.family: throwHands.name
            font.pointSize: 10
            text: "X"
            color: "red"
            horizontalAlignment: "AlignHCenter"
        }
    }

    Rectangle {
        id: popupInnerRect
        color: "white"
        width: parent.width * 3 / 4
        height: childrenRect.height
        radius: 10
        anchors.centerIn: parent

        Text {
            font.family: throwHands.name
            font.pointSize: 10
            width: parent.width - 20
            anchors.leftMargin: 10
            color: "red"
            horizontalAlignment: "AlignHCenter"
            wrapMode: "WordWrap"
        }

        transform:
            Rotation {
                id: popupRotation
                origin.x: popupInnerRect.width / 2;
                origin.y: popupInnerRect.height / 2;
                axis { x: 0; y: 1; z: 0 }
                angle: 90
            }
    }

    onShowChanged: {
        if (popup.show) {
            popupShowAnim.start()
        } else {
            popupHideAnim.start()
        }
    }

    SequentialAnimation {
        id: popupShowAnim
        running: false
        NumberAnimation { target:popup; property:"opacity"; from: 0; to: 0.7; duration:500 }
        NumberAnimation { target:popupRotation; property:"angle"; from: 90; to: 0; duration:500}
    }

    SequentialAnimation {
        id: popupHideAnim
        running: false
        NumberAnimation { target:popupRotation; property:"angle"; from: 0; to: 90; duration:500}
        NumberAnimation { target:popup; property:"opacity"; from: 0.7; to: 0; duration:500 }
    }

    MouseArea {
        anchors.fill: parent
        onClicked: {
            popup.show = false
        }
    }
}
